<template>
  <div class="css2_4">
      <h1>2.4 文本效果</h1>
      <h2>2.4.1 文本效果</h2>
      <p>
        <pre>
          text-shadow
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
        </pre>
      </p>
        <img src="../assets/images/3.30.png" alt="">
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>h-shadow</td>
            <td>必需。水平阴影的位置。允许负值。</td>
          </tr>
          <tr>
            <td>v-shadow</td>
            <td>必需。垂直阴影的位置。允许负值。</td>
          </tr>
          <tr>
            <td>blur</td>
            <td>可选。模糊的距离。</td>
          </tr>
          <tr>
            <td>color</td>
            <td>可选。阴影的颜色。参阅 CSS 颜色值。</td>
          </tr>
        </table>
        <p>
          <pre>
            text-overflow
&lt;style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
&lt;/style>
&lt;body>
&lt;p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。&lt;/p>
&lt;p>这个 div 使用 "text-overflow:ellipsis" ：&lt;/p>
&lt;div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box&lt;/div>
&lt;p>这个 div 使用 "text-overflow:clip"：&lt;/p>
&lt;div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box&lt;/div>
&lt;/body>
          </pre>
        </p>
        <img src="../assets/images/3.31.png" alt="">
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>clip</td>
            <td>修剪文本。</td>
          </tr>
          <tr>
            <td>ellipsis</td>
            <td>显示省略符号来代表被修剪的文本。</td>
          </tr>
          <tr>
            <td>string</td>
            <td>使用给定的字符串来代表被修剪的文本。</td>
          </tr>
        </table>
        <p>
          <pre>
            word-wrap
允许长单词换行到下一行：
&lt;style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
&lt;/style>
&lt;body>
&lt;p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.&lt;/p>
&lt;/body>
          </pre>
        </p>
        <img src="../assets/images/3.32.png" alt="">
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>normal</td>
            <td>只在允许的断字点换行（浏览器保持默认处理）。</td>
          </tr>
          <tr>
            <td>break-word</td>
            <td>在长单词或 URL 地址内部进行换行。</td>
          </tr>
        </table>
        <p>
          <pre>
            word-break
在恰当的断字点进行换行：
&lt;style> 
p.test1
{
width:11em; 
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
&lt;/style>
&lt;body>
&lt;p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.&lt;/p>
&lt;p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.&lt;/p>
          </pre>
        </p>
        <img src="../assets/images/3.33.png" alt="">
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>norma</td>
            <td>使用浏览器默认的换行规则。</td>
          </tr>
          <tr>
            <td>break-all</td>
            <td>允许在单词内换行。</td>
          </tr>
          <tr>
            <td>keep-all</td>
            <td>只能在半角空格或连字符处换行。</td>
          </tr>
        </table>
        <h2>2.4.2 CSS3字体</h2>
        <p>
          <pre>
            CSS3 字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：
          </pre>
        </p>
        <table border="1px">
          <tr>
            <th>描述符</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>font-family</td>
            <td>name</td>
            <td>必需。规定字体的名称。</td>
          </tr>
          <tr>
            <td>src</td>
            <td>URL</td>
            <td>必需。定义字体文件的 URL。</td>
          </tr>
          <tr>
            <td>font-stretch</td>
            <td>
             <p>
               <pre>
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
               </pre>
             </p>
            </td>
            <td>可选。定义如何拉伸字体。默认是 "normal"。
ultra-condensed"是最宽的值，
而 "ultra-expanded" 是最窄的值。</td>
          </tr>
          <tr>
            <td>font-style</td>
            <td>normal | italic | oblique</td>
            <td>可选。定义字体的样式。默认是 "normal"。</td>
          </tr>
          <tr>
            <td>font-weight</td>
            <td>
              <p>
                <pre>
normal
bold
100
200
300
400
500
600
700
800
900
                </pre>
              </p>
            </td>
            <td>可选。定义字体的粗细。默认是 "normal"。</td>
          </tr>
          <tr>
            <td>unicode-range</td>
            <td>unicode-range</td>
            <td>可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。</td>
          </tr>
        </table>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>